<template>
	<view class="">
		<view class="he1 w100pc"></view>
		<!-- 头部 -->
		<view class="fsb lrmg-30" style="height: 100rpx;">
			<image src="/static/image/9.png" style="width:86rpx;height:50rpx" class="" @click="pageback()"></image>
			<view class="flex aic">
			</view>
		</view>
		<view class="he3 w100pc"></view>
			<view class="gray272 weight f30 lrmg-30">我的訂單明细</view>
			<view class="he4 w100pc"></view>
			<u-tabs :list="list" :is-scroll="false" inactive-color="#333333" active-color="#1C416D" :current="current" @change="change"></u-tabs>
			<view class="" style="margin: 30rpx 50rpx 0;">
				<view class="flex al-start jsb">
					<view class="gray333 weight f34">購入USDT</view>
					<view class="f24" style="color: #9B9B9B;">{{current == 0 ? '未完成' : current == 1 ? '已完成' : '已取消'}}</view>
				</view>
				<view class="mg-t-20 fsb">
					<view class="">
						<view class="flex aic f24">
							<view class="" style="color: #9B9B9B;">單價</view>
							<view class="weight gray333 mg-l-20">6.45 USD</view>
						</view>
						<view class="flex aic mg-t-20 f24">
							<view class="" style="color: #9B9B9B;">數量</view>
							<view class="weight gray333 mg-l-20">2</view>
						</view>
					</view>
					<view class="weight f40" style="color: #FE6A6A;">$ 12.9</view>
				</view>
				<view class="fsb mg-t-20">
					<view class="f24" style="color: #9B9B9B;">2022-10-25  17:00:40</view>
					<view class="weight" style="color: #FE6A6A;" v-if="current == 1">
						<text class="">+2</text>
						<text class="f20">USDT</text>
					</view>
				</view>
			</view>
		<view class="he3 w100pc"></view>
	</view>
</template>

<script>
	var	that
	import {
		_updataTabBar,
		pageto,
		pageback
	} from "../../common/js/sysfun.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default{
		data(){
			return{
				customStyles: {
					color: '#D5D5D5',
					background:'#999999',
					width:'155rpx',
					height:'61rpx',
					fontWeight:'bold',
					fontSize:'30rpx',
					borderRadius:'60rpx',
					margin:'0'
				},
				list: [{
					name: '未完成'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				current: 0
			}
		},
		onLoad() {
			that = this
		},
		methods:{
			change(index) {
				this.current = index;
			},
			pageto(url, pp) {
				pageto(url, pp);
			},
			pageback(){
				pageback()
			}
		}
	}
</script>

<style lang="scss">
	.middle{
		background: #FFFFFF;
		box-shadow: 0px 0px 31rpx 1rpx rgba(15,6,10,0.13);
		border-radius: 20rpx;
		padding: 50rpx 20rpx;
	}
	.btn1{
		position: absolute;
		left: 0;
		top: 0;
		padding: 15rpx 50rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
		border-radius: 20rpx 0 20rpx 0;
	}
	.bg1{background: #FEC94F;}
	.bg2{background: #18376F;}
	.bg3{background: #FF6D33;}
</style>